<template>
	<div class="ll-page">
		<div class="content">
			<div style="flex: 1">
				<div style="padding: 14px; height: 100%">
					<n-grid cols="24" style="height: 100%">
						<n-grid-item span="18" style="margin-right: 10px">
							<n-grid cols="24" style="height: 100%; display: flex; flex-direction: column">
								<n-grid-item span="24" style="height: 325px">
									<n-grid cols="2" style="height: 100%">
										<n-grid-item class="item" span="1" style="margin-right: 10px">
											<div class="title-content">
												<div class="item-title"></div>
												<div class="item-content">订单信息</div>
											</div>
											<div class="ll-list-item" style="clear: both">
												<span class="ll-list-item-title title-width-one">订单编号：</span>
												<span class="ll-list-item-content">{{ detailInfo.uploadNo }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">商品站点：</span>
												<span class="ll-list-item-content">{{ detailInfo.city }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">商品ID：</span>
												<span class="ll-list-item-content">{{ detailInfo.productId }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">商品名称：</span>
												<span class="ll-list-item-content">{{ detailInfo.productName }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">提交时间：</span>
												<span class="ll-list-item-content">{{ detailInfo.uploadTime }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">创作者名称：</span>
												<span class="ll-list-item-content">{{ detailInfo.name }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">创作者电话：</span>
												<span class="ll-list-item-content">{{ detailInfo.mobile }}</span>
											</div>
											<div class="ll-list-item">
												<span class="ll-list-item-title title-width-one">合作方：</span>
												<span class="ll-list-item-content">{{ detailInfo.partnerName }}</span>
											</div>
										</n-grid-item>
										<n-grid-item class="item" span="1">
											<div class="title-content">
												<div class="item-title"></div>
												<div class="item-content">素材要求</div>
											</div>
											<div style="height: 100%; width: 100%">
												<div style="height: 100%; width: 50%; float: left">
													<div class="ll-list-item" style="margin-top: 0">
														<span class="ll-list-item-title title-width-two">上传时间：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.upResourceTime }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">照片素材定价：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.imgSalePriceStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">平台收益：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.imgPlatformPercentStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">创作者收益：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.imgCreatorPercentStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">照片下载次数：</span>
														<span class="ll-list-item-content">{{ detailInfo.imgStockStr }}</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">产品照片上限：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.imgMaxNumberStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">单次最大购买：</span>
														<span class="ll-list-item-content">{{ detailInfo.imgMaxBuyStr }}</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">单次最小购买：</span>
														<span class="ll-list-item-content">{{ detailInfo.imgMinBuy }}</span>
													</div>
												</div>
												<div style="height: 100%; width: 50%; float: left">
													<div class="ll-list-item" style="height: 7px; width: 100%">
														<span class="ll-list-item-title"></span>
														<span class="ll-list-item-content"></span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">视频素材定价：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.videoSalePriceStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">平台收益：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.videoPlatformPercentStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">创作者收益：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.videoCreatorPercentStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">视频下载次数：</span>
														<span class="ll-list-item-content">{{ detailInfo.videoStockStr }}</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">产品视频上限：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.videoMaxNumberStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">单次最大购买：</span>
														<span class="ll-list-item-content">
															{{ detailInfo.videoMaxBuyStr }}
														</span>
													</div>
													<div class="ll-list-item">
														<span class="ll-list-item-title title-width-two">单次最小购买：</span>
														<span class="ll-list-item-content">{{ detailInfo.videoMinBuy }}</span>
													</div>
												</div>
											</div>
										</n-grid-item>
									</n-grid>
								</n-grid-item>
								<n-grid-item class="item" span="24" style="margin-top: 10px; flex: 1">
									<div class="title-content">
										<div class="item-title"></div>
										<div class="item-content">素材内容</div>
									</div>
									<div class="resource">
										<div class="resource-title">
											<div class="resource-title-checkbox">
												<n-checkbox
													v-if="
														router.currentRoute.value.path === '/resource-apply/detailApplyVideo' ||
														router.currentRoute.value.path === '/resource-apply/detailApplyPerson'
													"
													:checked="checkedAllImg"
													@update:checked="checkAllImg"
												/>
											</div>
											<div class="resource-title-text" style="float: left">
												{{
													router.currentRoute.value.path === '/resource-apply/detailApplyVideo' ||
													router.currentRoute.value.path === '/resource-apply/detailApplyPerson'
														? '全选照片素材'
														: '照片素材'
												}}
											</div>
										</div>
										<div class="resource-audit-details">
											<n-checkbox-group
												v-model:value="imgSelected"
												class="resource-audit-details-group"
											>
												<div
													v-for="item in detailInfo.imgList"
													:key="item.id"
													class="resource-audit-details-group-item"
												>
													<n-checkbox
														v-if="
															router.currentRoute.value.path ===
																'/resource-apply/detailApplyVideo' ||
															router.currentRoute.value.path === '/resource-apply/detailApplyPerson'
														"
														class="resource-audit-details-group-item-checkbox"
														:value="item.id"
													/>
													<n-image
														width="88"
														height="88"
														style="height: 88px; width: 88px"
														:src="item.url"
													/>
												</div>
											</n-checkbox-group>
										</div>
									</div>
									<div class="resource">
										<div class="resource-title">
											<div class="resource-title-checkbox">
												<n-checkbox
													v-if="
														router.currentRoute.value.path === '/resource-apply/detailApplyVideo' ||
														router.currentRoute.value.path === '/resource-apply/detailApplyPerson'
													"
													:checked="checkedAllVideo"
													@update:checked="checkAllVideo"
												/>
											</div>
											<div class="resource-title-text">
												{{
													router.currentRoute.value.path === '/resource-apply/detailApplyVideo' ||
													router.currentRoute.value.path === '/resource-apply/detailApplyPerson'
														? '全选视频素材'
														: '视频素材'
												}}
											</div>
										</div>
										<div class="resource-audit-details">
											<n-checkbox-group
												v-model:value="videoSelected"
												class="resource-audit-details-group"
											>
												<div
													v-for="item in detailInfo.videoList"
													:key="item.id"
													class="resource-audit-details-group-item"
												>
													<n-checkbox
														v-if="
															router.currentRoute.value.path ===
																'/resource-apply/detailApplyVideo' ||
															router.currentRoute.value.path === '/resource-apply/detailApplyPerson'
														"
														class="resource-audit-details-group-item-checkbox"
														:value="item.id"
													/>
													<img
														class="resource-audit-details-group-item-video-cover"
														:src="item.coverUrl"
														@click="sourceVideoClick(item.id)"
													/>
													<img
														class="resource-audit-details-group-item-video-play"
														src="@/assets/images/icon_sc_playvideo@2x.png"
														@click="sourceVideoClick(item.id)"
													/>
												</div>
											</n-checkbox-group>
										</div>
									</div>
								</n-grid-item>
							</n-grid>
						</n-grid-item>
						<n-grid-item class="item" span="6">
							<div class="title-content">
								<div class="item-title"></div>
								<div class="item-content">审批流程</div>
							</div>
							<div class="resource-audit-process">
								<div
									v-for="(item, index) in detailInfo.auditRecord"
									:key="index"
									class="resource-audit-process-item"
								>
									<div class="resource-audit-process-item-round"></div>
									<div
										v-if="detailInfo.auditRecord.length !== index + 1"
										class="resource-audit-process-item-line"
									></div>
									<div class="resource-audit-process-item-name">{{ item.approveUserName }}</div>
									<div class="resource-audit-process-item-time">{{ item.approveTime }}</div>
									<div
										class="resource-audit-process-item-status"
										:style="{ color: item.result === 1 ? '#57AE59' : '#F55F4E' }"
									>
										{{ item.result === 1 ? '审批通过' : '驳回审批' }}
									</div>
								</div>
							</div>
						</n-grid-item>
					</n-grid>
				</div>
			</div>
			<div class="bottom">
				<n-button
					class="current-button"
					color="rgba(0, 0, 0, 0.1)"
					:style="{
						marginRight: '10px',
						background:
							(router.currentRoute.value.path === '/resource-apply/detailApplyVideo' &&
								detailInfo.approveStatus === 1) ||
							(router.currentRoute.value.path === '/resource-apply/detailApplyPerson' &&
								detailInfo.approveStatus === 2)
								? 'rgba(0, 0, 0, 0.1)'
								: '#1D6FE9',
						color:
							(router.currentRoute.value.path === '/resource-apply/detailApplyVideo' &&
								detailInfo.approveStatus === 1) ||
							(router.currentRoute.value.path === '/resource-apply/detailApplyPerson' &&
								detailInfo.approveStatus === 2)
								? '#333333'
								: '#ffffff',
						borderRadius: '4px',
						width: '80px'
					}"
					@click="backPage"
				>
					返回
				</n-button>
				<n-button
					v-if="
						(router.currentRoute.value.path === '/resource-apply/detailApplyVideo' &&
							detailInfo.approveStatus === 1) ||
						(router.currentRoute.value.path === '/resource-apply/detailApplyPerson' &&
							detailInfo.approveStatus === 2)
					"
					color="rgba(0, 0, 0, 0.1)"
					class="current-button"
					style="
						margin-right: 10px;
						background: #f55f4e;
						border-radius: 4px;
						width: 93px;
						border: none;
					"
					:disabled="disApprove"
					@click="backApprove"
				>
					一键驳回
				</n-button>
				<n-button
					v-if="
						(router.currentRoute.value.path === '/resource-apply/detailApplyVideo' &&
							detailInfo.approveStatus === 1) ||
						(router.currentRoute.value.path === '/resource-apply/detailApplyPerson' &&
							detailInfo.approveStatus === 2)
					"
					class="current-button"
					type="primary"
					style="margin-right: 10px; border-radius: 4px; width: 93px"
					:disabled="disApprove"
					@click="successApprove"
				>
					审核通过
				</n-button>
			</div>
		</div>

		<!-- S 驳回 -->
		<n-modal
			v-model:show="showRejectedModal"
			title="驳回原因"
			preset="dialog"
			:show-icon="false"
			:mask-closable="false"
			@close="handleRejectedClose"
		>
			<div>
				<n-form label-placement="left" :show-feedback="false">
					<n-form-item>
						<n-input
							v-model:value="backMessage"
							type="textarea"
							placeholder="请输入"
							maxlength="100"
							minlength="1"
							show-count
						/>
					</n-form-item>
				</n-form>
			</div>
			<template #action>
				<n-button
					size="small"
					color="rgba(0, 0, 0, 0.1)"
					text-color="#333333"
					@click="handleRejectedClose"
				>
					取消
				</n-button>
				<n-button
					type="primary"
					color="#F55F4E"
					text-color="#FFFFFF"
					size="small"
					:loading="loadingBH"
					:disabled="loadingBH"
					@click="approve(2)"
				>
					确认驳回
				</n-button>
			</template>
		</n-modal>
		<!-- E 驳回 -->

		<!-- S 审核通过 -->
		<n-modal
			v-model:show="showSuccessModal"
			title="确认通过"
			preset="dialog"
			:show-icon="false"
			:mask-closable="false"
			@close="handleSuccessClose"
		>
			是否确认通过该{{ imgSelected.length }}张照片，{{ videoSelected.length }}个视频？
			<template #action>
				<n-button
					size="small"
					color="rgba(0, 0, 0, 0.1)"
					text-color="#333333"
					@click="handleSuccessClose"
				>
					取消
				</n-button>
				<n-button
					type="primary"
					text-color="#FFFFFF"
					size="small"
					:loading="loadingTG"
					:disabled="loadingTG"
					@click="approve(1)"
				>
					确认通过
				</n-button>
			</template>
		</n-modal>
		<!-- E 审核通过 -->
	</div>
	<DYFXPlay ref="player" :video-url="videoUrl" />
</template>

<script setup>
import { nextTick, onMounted, onBeforeMount, ref, watch } from 'vue';
import { useMessage } from 'naive-ui';
import { useRouter, useRoute } from 'vue-router';
import {
	findPersonAudit,
	findVideoAudit,
	findDetail,
	auditWithVideoPerson,
	auditWithPerson,
	createAuthInfoUrlByAlgorithmA
} from '@/api/resourceApply';
import DYFXPlay from '@/components/DYFXPlay.vue';
const router = useRouter();
const route = useRoute();
const message = useMessage();

const showRejectedModal = ref(false);
const showSuccessModal = ref(false);
const videoSelected = ref([]);
const imgSelected = ref([]);
let backMessage = ref(null);
let checkedAllImg = ref(false);
let checkedAllVideo = ref(false);
let detailInfo = ref({});
let disApprove = ref(false);

//播放组件
let videoUrl = ref('');
const player = ref(null);
const sourceVideoClick = async (resourceId) => {
	let params = {
		resourceApplyNo: detailInfo.value.uploadNo,
		resourceId: resourceId
	};
	let res = await createAuthInfoUrlByAlgorithmA(params);
	if (res && res.code === 200) {
		player.value.openPlay();
		videoUrl.value = res.data;
	} else {
		message.error('播放失败');
	}
};

let loadingBH = ref(false);
let loadingTG = ref(false);
const approve = async (value) => {
	if (value === 2) {
		loadingBH.value = true;
		if (!backMessage.value) {
			message.error('驳回信息不能为空');
			loadingBH.value = false;
			return;
		}
		if (router.currentRoute.value.path === '/resource-apply/detailApplyVideo') {
			// 视频审核员审核
			console.log('视频审核员审核-驳回');
			let params = {
				approveStatus: detailInfo.value.approveStatus,
				message: backMessage.value,
				resourceApplyId: detailInfo.value.id,
				resourcePictureIds: [],
				resourceVideoIds: [],
				result: 2
			};
			let res = await auditWithVideoPerson(params);
			if (res && res.code !== 200) {
				message.error(res.message);
				loadingBH.value = false;
			} else {
				showRejectedModal.value = false;
				message.success('成功驳回');
				disApprove.value = true;
				loadingBH.value = false;
				backPage();
			}
		} else if (router.currentRoute.value.path === '/resource-apply/detailApplyPerson') {
			// 指定人审核
			console.log('指定人审核-驳回');
			let params = {
				approveStatus: detailInfo.value.approveStatus,
				message: backMessage.value,
				resourceApplyId: detailInfo.value.id,
				resourcePictureIds: [],
				resourceVideoIds: [],
				result: 2
			};
			let res = await auditWithPerson(params);
			console.log('res', res);
			if (res && res.code !== 200) {
				message.error(res.message);
				loadingBH.value = false;
			} else {
				showRejectedModal.value = false;
				message.success('成功驳回');
				disApprove.value = true;
				loadingBH.value = false;
				backPage();
			}
		}
	} else if (value === 1) {
		loadingTG.value = true;
		if (router.currentRoute.value.path === '/resource-apply/detailApplyVideo') {
			// 视频审核员审核
			console.log('视频审核员审核-通过');
			let params = {
				approveStatus: detailInfo.value.approveStatus,
				message: '',
				resourceApplyId: detailInfo.value.id,
				resourcePictureIds: imgSelected.value,
				resourceVideoIds: videoSelected.value,
				result: 1
			};
			let res = await auditWithVideoPerson(params);
			if (res && res.code !== 200) {
				message.error(res.message);
				loadingTG.value = false;
			} else {
				showSuccessModal.value = false;
				message.success('审核通过');
				disApprove.value = true;
				loadingTG.value = false;
				backPage();
			}
			console.log('res-通过', res);
		} else if (router.currentRoute.value.path === '/resource-apply/detailApplyPerson') {
			// 指定人审核
			console.log('指定人审核-通过');
			let params = {
				approveStatus: detailInfo.value.approveStatus,
				message: '',
				resourceApplyId: detailInfo.value.id,
				resourcePictureIds: imgSelected.value,
				resourceVideoIds: videoSelected.value,
				result: 1
			};
			let res = await auditWithPerson(params);
			console.log('res', res);
			if (res && res.code !== 200) {
				message.error(res.message);
				loadingTG.value = false;
			} else {
				showSuccessModal.value = false;
				message.success('审核通过');
				disApprove.value = true;
				loadingTG.value = false;
				backPage();
			}
		}
	}
};

// 关闭驳回弹窗
const handleRejectedClose = (e) => {
	backMessage.value = null;
	showRejectedModal.value = false;
};
const handleSuccessClose = (e) => {
	showSuccessModal.value = false;
};
const backApprove = (e) => {
	showRejectedModal.value = true;
	loadingBH.value = false;
};
const backPage = () => {
	router.push(router.currentRoute.value.query.btn);
};

const successApprove = (e) => {
	if (videoSelected.value.length <= 0 && imgSelected.value.length <= 0) {
		message.error('请选择需要通过的数据');
		return;
	}
	showSuccessModal.value = true;
	loadingTG.value = false;
};
const checkAllImg = (value) => {
	if (value) {
		let imgList = detailInfo.value.imgList;
		for (let i in imgList) {
			let img = imgList[i];
			imgSelected.value.push(img.id);
		}
		checkedAllImg.value = true;
	} else {
		imgSelected.value = [];
		checkedAllImg.value = false;
	}
};
const checkAllVideo = (value) => {
	if (value) {
		let videoList = detailInfo.value.videoList;
		for (let i in videoList) {
			let video = videoList[i];
			videoSelected.value.push(video.id);
		}
		checkedAllVideo.value = true;
	} else {
		videoSelected.value = [];
		checkedAllVideo.value = false;
	}
};

nextTick(() => {
	initData();
});

// 初始化数据
const initData = async () => {
	let params = { id: router.currentRoute.value.query.applyId };
	if (router.currentRoute.value.path === '/resource-apply/detailApplyVideo') {
		console.log('视频审核员');
		let res = await findVideoAudit(params);
		if (res && res.code === 200) {
			detailInfo.value = res.data;
		}
	} else if (router.currentRoute.value.path === '/resource-apply/detailApplyPerson') {
		console.log('个人审核员');
		let res = await findPersonAudit(params);
		if (res && res.code === 200) {
			detailInfo.value = res.data;
		}
	} else if (router.currentRoute.value.path === '/resource-apply/findDetail') {
		console.log('详情');
		let res = await findDetail(params);
		if (res && res.code === 200) {
			detailInfo.value = res.data;
		}
	}
	console.log('detailInfo', detailInfo);
};

onMounted(() => {
	// let applyId = router.currentRoute.value.params.applyId;
	// let btn = router.currentRoute.value.params.btn;
	// if (applyId) {
	// 	localStorage.setItem('applyId', applyId + '');
	// } else {
	// 	applyId = localStorage.getItem('applyId');
	// }
	// if (btn) {
	// 	localStorage.setItem('btn', btn + '');
	// } else {
	// 	btn = localStorage.getItem('btn');
	// }
	// console.log(applyId, 'applyId');
	// initData(applyId, btn);
});

watch(imgSelected, (imgCount) => {
	if (imgCount.length !== detailInfo.value.imgList.length) {
		checkedAllImg.value = false;
	} else {
		checkedAllImg.value = true;
	}
});
watch(videoSelected, (videoSelected) => {
	if (videoSelected.length !== detailInfo.value.videoList.length) {
		checkedAllVideo.value = false;
	} else {
		checkedAllVideo.value = true;
	}
});
</script>

<style lang="less" scoped>
.ll-page {
	width: 100vw;
	height: 100vh;
	padding: 10px;
	background-color: #ffffff;
	overflow: auto;
	margin-bottom: 50px;

	.content {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #f3f6ff 0%, #fcfdff 100%);
		border-radius: 14px;
		display: flex;
		flex-direction: column;

		.item {
			background: #ffffff;
			border-radius: 4px;
			border: 1px solid #f0f0f0;
			padding: 14px;

			.item-content {
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 20px;
				float: left;
				height: 14px;
				margin-left: 14px;
			}

			.ll-list-item {
				margin-top: 14px;

				.ll-list-item-title {
					display: inline-block;
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 20px;
				}

				.ll-list-item-content {
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 20px;
				}
			}

			.title-content {
				margin-bottom: 14px;
				height: 20px;

				.item-title {
					width: 3px;
					height: 18px;
					background: #57ae59;
					float: left;
				}
			}
		}

		.bottom {
			height: 55px;
			padding: 10px 0 10px 0px;
			border-radius: 0px 0px 8px 8px;
			border: 1px solid #f0f0f0;
			text-align: center;
			background-color: #ffffff;
		}

		.resource {
			.title {
				font-size: 14px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 20px;
				height: 30px;
			}
			margin-bottom: 20px;
			&-title {
				display: flex;
				align-items: center;
				&-checkbox {
					width: 20px;
				}
				&-text {
					margin-left: 6px;
					font-size: 14px;
					font-weight: 500;
					color: #333333;
				}
			}
			&-audit-details {
				margin-top: 14px;
				margin-left: 24px;
				&-group {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					&-item {
						width: 104px;
						height: 104px;
						background: #ffffff;
						border-radius: 2px;
						border: 1px solid rgba(0, 0, 0, 0.15);
						padding: 8px;
						margin-right: 10px;
						margin-bottom: 10px;
						position: relative;
						&-checkbox {
							position: absolute;
							border-radius: 2px;
							left: 1px;
							top: 1px;
						}
						&-video-cover {
							width: 88px;
							height: 88px;
							cursor: pointer;
						}
						&-video-play {
							position: absolute;
							top: 34px;
							left: 34px;
							width: 36px;
							height: 36px;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
	.resource-audit-process {
		&-item {
			position: relative;
			padding-left: 30px;
			height: 89px;
			&-round {
				position: absolute;
				z-index: 2;
				top: 3px;
				left: 0px;
				width: 14px;
				height: 14px;
				background: #f5894e;
				border: 2px solid #ffffff;
				border-radius: 50%;
			}
			&-line {
				position: absolute;
				z-index: 1;
				top: 3px;
				left: 6px;
				width: 2px;
				height: 89px;
				background: #f5894e;
			}
			&-name {
				font-size: 14px;
				font-weight: 500;
				color: #333333;
				line-height: 20px;
			}
			&-time {
				font-size: 14px;
				font-weight: 400;
				color: #999999;
				line-height: 20px;
				margin-top: 2px;
			}
			&-status {
				width: 58px;
				height: 16px;
				background: rgba(143, 179, 154, 0.08);
				border-radius: 4px;
				font-size: 12px;
				font-weight: 600;
				line-height: 16px;
				text-align: center;
				margin-top: 2px;
			}
		}
	}
}
.title-width-one {
	width: 84px;
}
.title-width-two {
	width: 98px;
}
.current-button {
	& :deep(.n-button__border) {
		border: none;
	}
}
</style>
